<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Emoji</title>
    <link rel="stylesheet" href="first%20commit.css" type="text/css">
</head>

<body>
<div class="container">
    <div class="face">
        <div class="eyes">
            <div class="eye"></div>
            <div class="eye"></div>
        </div>
    </div>
    <div class="hat-container">
        <div class="hat">
        </div>
        <div class="hat-peak"></div>
    </div>
</div>

<script>
    document.querySelector("body")
        .addEventListener("mousemove", eyeball);
    function eyeball() {
        var eye = document.querySelectorAll(".eye");
        eye.forEach(eye => {
            let x = (eye.getBoundingClientRect()
                .left) + (eye.clientWidth / 2);
            let y = (eye.getBoundingClientRect()
                .top) + (eye.clientHeight / 2);
            let radian = Math.atan2(event.pageX -
                x, event.pageY - y);
            let rot = (radian * (180 / Math.PI) *
                -1) + 270;
            eye.style.transform = "rotate(" + rot
                + "deg)";
        });
    }
</script>
</body>

</html>